<template>
    <div class="list-container">
        <div class="title-container">
            <span> {{ superProps.title }}</span>
            <el-popover :placement="superProps.popOverDir" :width="200" trigger="click">
                <template #reference>
                    <el-icon :size="24">
                        <Tools />
                    </el-icon>
                </template>
                <template #default>
                    <el-popover :placement="superProps.popOverDir" :width="200" trigger="hover">
                        <template #reference>
                            <div style="display: flex; flex-direction: column">
                                <div>
                                    自定义一级菜单
                                </div>
                            </div>
                        </template>
                        <template #default>
                            <div style="display: flex; flex-direction: column">
                                <div>
                                    自定义二级菜单
                                </div>
                            </div>
                        </template>
                    </el-popover>
                </template>
            </el-popover>
        </div>
        <div class="body-container">
            <el-input v-model="query.param" :placeholder="'搜索' + superProps.title" :prefix-icon="Search" clearable
                @change="getList" style="margin-bottom: 8px" />
            <el-button-group v-if="superProps.isBtnShow">
                <el-button type="success" :icon="Plus" size="small">新增</el-button>
                <el-button type="primary" :icon="Edit" size="small">编辑</el-button>
            </el-button-group>
            <div class="list-content" v-loading="loading">
                <el-scrollbar :height="superProps.listHeight">
                    <el-card v-for="(item, index) in list" :key="index" shadow="hover"
                        style="margin: 8px; cursor: pointer;" @mousedown="handleAddNode(item, $event)">
                        <div>{{ item.title }}</div>
                    </el-card>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>

<script setup name="MiniList">
import { reactive, ref } from "vue-demi"
import { Search, Plus, Edit } from '@element-plus/icons-vue'
import { customQuery } from '@/api/modDesign/index'
import { number } from "echarts"

const superProps = defineProps({
    title: {
        type: String,
        default: '默认标题'
    },
    isBtnShow: {
        type: Boolean,
        default: true
    },
    queryUrl: {
        type: String,
        required: true
    },
    listHeight: {
        type: Number,
        required: true
    },
    popOverDir: {
        type: String,
        default: 'right-start'
    }
})
const query = reactive({
    pageNum: 1,
    pageSize: 10,
    param: undefined
})
const list = ref([])
const loading = ref(true)

const getList = async () => {
    loading.value = true
    const res = await customQuery(superProps.queryUrl, query)
    if (res.code && res.code === 200) {
        list.value = res.rows
        loading.value = false
    }
}
const emit = defineEmits(['addClick'])
const handleAddNode = (item, e) => {
    emit('addClick', item, e)
}

getList()

</script>

<style lang="scss" scoped>
.list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #dcdfe6;
    height: 100%;
    .title-container {
        width: 100%;
        height: 36px;
        border-bottom: 1px solid #dcdfe6;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #409eff;
        span {
            flex: 1;
            text-align: center;
        }
        i {
            margin-right: 8px;
            cursor: pointer;
        }
    }
    .body-container {
        height: 85%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        .list-content {
            // flex: 1;
            margin-top: 8px;
        }
    }
}
</style>>